<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				下载
			</view>
		</u-navbar>
		<u-gap height="20" bg-color="#F5F5F5"></u-gap>
		<view class="main">
			<view class="main-top u-flex">
				<u-icon :name="0?'play-circle':'pause-circle'" color="#FE7E00" size="45"></u-icon>
				<view class="u-font-30">全部暂停</view>
			</view>
			<view class="main-box flex ">
				<!-- <image src="../../static/images/banren.png" mode="aspectFill"></image> -->
				<view class="flex u-flex-1">
					<view class="u-flex-1 flex flex-direction justify-between">
						<view class="name u-font-32">
							中华墨坊课程介绍
						</view>
						<view class="">
							<view class="progress" v-if="progress<100">
								<u-line-progress active-color="#FE7E00" height="6" :show-percent="false" :percent="progress"></u-line-progress>
							</view>
							<view class="flex justify-between u-font-24" v-if="progress<100">
								<view class="text-orange">
									正在下载
								</view>
								<view class="">
									{{totalBytesWritten}}M/{{totalBytesExpectedToWrite}}M
								</view>
							</view>
							<view class="flex justify-between u-font-24" v-if="progress==100">
								<view class="text">
									84M
								</view>
							</view>
						</view>
					</view>
					<view class="flex icon  cuIcon-moreandroid" @click="showModal" data-target="bottomModal">
					</view>
				</view>
			</view>
			<view class="main-box flex ">
				<!-- <image src="../../static/images/banren.png" mode="aspectFill"></image> -->
				<view class="flex u-flex-1">
					<view class="u-flex-1">
						<view class="name u-font-32">
							中华墨坊课程介绍
						</view>
						<view class="">
							<view class="progress">
								<u-line-progress active-color="#FE7E00" height="6" :show-percent="false" :percent="70"></u-line-progress>
							</view>
							<view class="flex justify-between u-font-24">
								<view class="text-orange">
									正在下载
								</view>
								<view class="text">
									12M/18M
								</view>
							</view>
						</view>
					</view>
					<view class="flex icon  cuIcon-moreandroid" @click="showModal" data-target="bottomModal">
					</view>
				</view>
			</view>
			<view class="main-box flex ">
				<!-- <image src="../../static/images/banren.png" mode="aspectFill"></image> -->
				<view class="flex u-flex-1">
					<view class="u-flex-1 flex flex-direction justify-between">
						<view class="name u-font-32">
							中华墨坊课程介绍
						</view>
						<view class="">
							<!-- <view class="progress">
								<u-line-progress active-color="#FE7E00" height="6" :show-percent="false" :percent="70"></u-line-progress>
							</view> -->
							<view class="flex justify-between u-font-24">
								<view class="text">
									84M
								</view>
							</view>
						</view>
					</view>
					<view class="flex icon  cuIcon-moreandroid" @click="showModal" data-target="bottomModal">
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="">
					<view class="cuIcon-delete"></view>
					<!-- <image src="" mode=""></image> -->
					<view class="">
						删除
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				progress:0,
				totalBytesWritten: 0,
				totalBytesExpectedToWrite: 0,
				
				downloadTask:''
			}
		},
		onLoad() {

		},
		methods: {
			Back() {
				uni.navigateBack({});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			tingzhi(){
				console.log(99999)
				// this.downloadTask = uni.downloadFile({
				//     url: 'http://huoshan.szhulian.cn/1606723252868.mp4', //仅为示例，并非真实的资源  
				//     success: (res) => {
				//         if (res.statusCode === 200) {
				//             console.log('下载成功');  
				//         }  
				//     }  
				// });  
				this.downloadTask.abort()//中断下载任务  
			},
			download(){//开始下载
			console.log(8888)
				 this.downloadTask = uni.downloadFile({
				    url: 'http://huoshan.szhulian.cn/1606723252868.mp4', //仅为示例，并非真实的资源  
				    success: (res) => {
				        if (res.statusCode === 200) {
				            console.log('下载成功');  
				            uni.saveFile({
				                tempFilePath: res.tempFilePath,  
				                success: function(red) {  
				                    console.log('保存成功')  
				                    console.log('任务完成，中断下载任务')  
				                    this.downloadTask.abort()//中断下载任务  
				                }  
				            });  
				        }  
				    }  
				});  
				this.downloadTask.onProgressUpdate((res) => {  
				    console.log('下载进度' + res.progress);  
					// this.progress =res.progress
				    console.log('已经下载的数据长度' + res.totalBytesWritten);  
				    console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);  
					// let totalBytesWritten= Math.floor(res.totalBytesWritten/1048576);
					// this.totalBytesWritten = totalBytesWritten;
					// let totalBytesExpectedToWrite= Math.floor(res.totalBytesExpectedToWrite/1048576);
					// this.totalBytesExpectedToWrite = totalBytesExpectedToWrite;
					 // 测试条件，取消下载任务。
					    // if (res.progress > 50) {
					    //     this.downloadTask.abort();
					    // }
				});  
			} 
		}
	}
</script>

<style lang="scss">
	.main{
		padding: 0 30rpx;
		.main-top{
			margin: 35rpx 0rpx;
			view{
				margin-right: 15rpx;
			}
		}
		.main-box{
			margin-bottom: 35rpx;
			image{
				width: 182rpx;
				height: 130rpx;
				border-radius: 5rpx;
				margin-right: 15rpx;
			}
			.name{
				color: #333;
				max-width: 450rpx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			.text{
				color: #666;
				margin-bottom: 14rpx;
			}
		}
		.progress{
			padding: 10rpx 0;
		}
		.icon{
			// transform: rotate(90deg);
			margin-top: 40rpx;
			font-size: 38rpx;
			margin-left: 10rpx;
		}
	}
	.cu-modal.bottom-modal .cu-dialog{
		background-color: #fff;
		padding: 20rpx 0;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 30rpx;
		.cuIcon-delete{
			font-size: 42rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
